<template>
    <div class="pt44">
        <div class="record_type">
            <div>
                <span @click="toLoanRecor">小通帮你借</span>
            </div>
            <div>
                <span class="checked">小通帮你延</span>
            </div>
        </div>
        <div id="iscrollBox"  @scroll= "scrollFuc">
            <dl>
                <dd v-for="item in recordArray"  @click="toOrderDetails(item)">
                    <div>
                        <span class="apply_money">交易本金: </span><span>{{item.borrowAmt}}元</span>
                        <span v-bind:class="[item.orderState=='02'?'succeed':'fail']" class="fr succeed">{{item.orderStatemsg}}</span>
                    </div>
                    <div class="record_explain">
                        <span>{{item.serialNoTime}}</span>
                        <span class="fr">交易总额: {{item.freezeAmt}}元</span>
                    </div>
                </dd>
            </dl>
        </div>
    </div>
</template>

<script>
var cm = require("../components/common.js");
var iscrollBoxDom;
export default  {
    name: 'AccountRecord',  // 帐期贷款记录
    data () {  // 数据
        return {
            msg: 'AccountRecord',
            recordArray:[],
            minCount:0,
            maxCount:20,
            recordArray:[],
            sHeight:0,
        }
    },
    methods:{ // 自定义方法，可对data进行处理
        init(){
            this.sHeight = window.innerHeight-100;
            $("#iscrollBox").css("height",this.sHeight+"px");
            iscrollBoxDom = $("#iscrollBox")[0];
//            this.$scrollParent = $("#iScrollparent");
        },
        scrollFuc(){

            console.log("iscorllMove" + iscrollBoxDom.scrollTop);
           if(iscrollBoxDom.scrollTop == 0){
                console.log("滚到头");
                this.refreshData();
            }else if(iscrollBoxDom.scrollTop == (iscrollBoxDom.scrollHeight - this.sHeight)){
                console.log("滚动到底");
                this.pushData();
            }
        },
        toOrderDetails(item){
            console.log("toOrderDetails.........");
            this.$store.state.detailItem = item;
            location.hash = "#/orderDetails";
        },
        refreshData(){  // 刷新数据
            this.$store.state.showLoading = true;
            this.minCount = 0;
            this.maxCount = 20;
            this.getRecordData();
        },
        pushData(){  // 加载更多数据
            this.$store.state.showLoading = true;
            this.minCount += 20;
            this.maxCount += 20;
            this.getRecordData();
        },
        handleRecorArray(theRecord){

            var stateClassMap = {
                "00":"repaid",
                "01":"unpaid",
                "02":"fail"
            };
            for(var i=0,l=theRecord.length;i<l;i++){
                theRecord[i].borrowAmt = cm.comdify(parseFloat(theRecord[i].borrowAmt).toFixed(2));
                theRecord[i].freezeAmt = cm.comdify(parseFloat(theRecord[i].freezeAmt).toFixed(2));
                if(theRecord[i].applyDate && theRecord[i].applyDate != undefined){  // applyDate 改成 applyDate 由于后台用applyDate排序
                    var formatetapplyDateStr = String(theRecord[i].applyDate) + String(theRecord[i].applyTime);
                    theRecord[i].serialNoTime = cm.getDateStrFormate1(formatetapplyDateStr,"second");
                }else{
                    console.log("serialNoTimeserialNoTime....")
                    theRecord[i].serialNoTime = cm.getDateStrFormate1(theRecord[i].serialNoTime,"second")
                }
                if(theRecord[i].orderState == "01"){
                    theRecord[i].orderStatemsg = "待完成交易";
                }else if(theRecord[i].orderState == "02"){
                    theRecord[i].orderStatemsg = "延期成功待还款";
                    if(theRecord[i].repayState == "01"){
                      theRecord[i].orderStatemsg = "已还款";
                  }
                }else{
                    theRecord[i].orderStatemsg = "失败";
                }

                theRecord[i].stateClass = stateClassMap[theRecord[i].orderState];
            }
            if(this.minCount == 0){
                this.recordArray = theRecord;
            }else{
                this.recordArray = this.recordArray.concat(theRecord);
            }
        },
        getRecordData(){
            var lrParaments = {
            openId: this.$store.state.openid,  //微信号
            prdtNo:this.$store.state.prdtNo, //产品号
            channelNo: this.$store.state.channelNo, //产品渠道
            minCount:this.minCount,
            maxCount:this.maxCount,
            servlet_type:"query_order"
            }
            var _this = this;
            $.post(XtsdOrderServlet, lrParaments, function(lrdata) {
                console.dir(lrdata);
                _this.$store.state.showLoading = false;
                if(lrdata.xtsd_OrderInfo_response && lrdata.xtsd_OrderInfo_response.respCode== "0000" && lrdata.xtsd_OrderInfo_response.resXtsdOrderInfos_arrays && lrdata.xtsd_OrderInfo_response.resXtsdOrderInfos_arrays.resXtsdOrderInfos){
                    var theRecord =lrdata.xtsd_OrderInfo_response.resXtsdOrderInfos_arrays.resXtsdOrderInfos;
                    _this.handleRecorArray(theRecord);
                    setTimeout(function  () {
                        _this.scrollHeight = $("#iscrollBox")[0].scrollHeight;

                    },300);

                }else if(lrdata.xtsd_OrderInfo_response && lrdata.xtsd_OrderInfo_response.respCode== "0000" && (lrdata.xtsd_OrderInfo_response.resXtsdOrderInfos_arrays == "" || lrdata.xtsd_OrderInfo_response.resXtsdOrderInfos_arrays.resXtsdOrderInfos.length ==0)){
                    _this.$store.state.errorMsg = "没有更多记录";
                }else if(lrdata.error_response && lrdata.error_response.resp_msg){
                    _this.$store.state.errorMsg = lrdata.error_response.resp_msg;
                }else{
                    _this.$store.state.errorMsg = "查询失败";
                }
            });
        },
        toLoanRecor(){
/*            this.$store.state.prdtNo = "01";*/
            location.hash = "#/loanRecord";
        }
    },
    beforeMount:function  () {
        this.$store.state.channelNo = "02";
        this.getRecordData();
    },
    mounted:function(){
        this.init();
        this.$store.commit('changeTitle','小通帮你延');

    },
    beforeRouteLeave:function(to,from,next) {
        if(to.name != "LoanRecord" && to.name != "OrderDetails" && to.name != "Home"){
            wx.closeWindow();
        }else{
            next();
        }
    }
}
</script>

<style lang='scss' scoped>
@import "../assets/scss/vendors/weui-sass/src/style/base/mixin/setOnepx";
.record_type{
    margin:15px 0;
    div{
        text-align: center;
        &:first-child{
            display: inline-block;
            float: left;
            width: 50%
        }
    }
    span{
        display:inline-block;
        margin: auto;
        position:relative;
        &:after{
            content: " ";
            position: absolute;
            left: 0;
            bottom: 0;
            right: 0;
            height: 1px;
            border-bottom: 1px solid #ccc;
            color: #ccc;
        }
    }
    span.checked{
        &:after{
            border-bottom-color: #2792e4;
        }
    }
}
#iscrollBox{

    overflow: auto;
}
dl{
    padding: 0 15px;
    font-size: 14px;
    dd{
        background-color: #fff;
        padding:10px;
        line-height: 36px;
        margin-top: 10px;

    }
    .record_explain{
        color: #999;
        position: relative;
        &:before{
            @include setTopLine();
        }
    }
    .apply_money{
        font-size: 18px;
    }
    .succeed{
        color: #2792e4;
    }
    .fail{
        color:#f01921;
    }
}
</style>
